<template>
  <div class="box">
    <div class="main">
      <div class="top">
        <div class="userinfos" v-for="item in oneinfo" :key="item.id">
          <img :src="basurl + item.imgs" alt="图片" @click.stop="ishow = true"/>
          <div class="userinfo">
            <ul>
              <li>{{ item.username }}</li>
              <li>{{ item.sex }}</li>
              <li>{{ item.age }}岁</li>
              <li>{{ item.phone }}</li>
              <li>{{ item.mail }}</li>
            </ul>
            <div class="qianming">
              {{ item.sing }}
            </div>
            <i class="el-icon-edit update" @click="dialogFormVisible = true"
              >修改资料</i
            >
          </div>
        </div>
      </div>
    </div>
    <div class="mid w">
      <div class="nav">
        <ul>
          <li>我的影评</li>
        </ul>
      </div>
      <div class="text" v-if="data">
        <ul>
          <li v-for="item in myreply" :key="item.id">
            <!-- 电影头像 -->
            <img :src="basurl + item.url" alt="图片" @click="hit(item.d_id)" />
            <div class="textbox">
              <!-- 评论时间 -->
              <div class="time">{{ item.time }}</div>
              <!-- 评论内容 -->
              <div class="neirong">{{ item.content }}</div>
              <div class="del" @click="delmyremark(item.id)">删除</div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="notext">
        <div>
          <i class="el-icon-files"></i>
          <div>还没有内容</div>
        </div>
      </div>
    </div>
    <!-- 修改信息 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.mail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择活动区域">
            <el-option label="男" value="shanghai"></el-option>
            <el-option label="女" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input
            v-model="form.sing"
            autocomplete="off"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata">确 定</el-button>
      </div>
    </el-dialog>
  <!-- 修改头像 -->
    <el-dialog title="提示" :visible.sync="ishow" :center="true">
      <img :src="basurl+page" alt="头像" class="oo">
      <div slot="footer" class="dialog-footer">
        <input type="file" ref="file">
        <el-button type="primary" @click="uplog">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getuserone, myremark, delremark, upmyinfo,upimg } from "@/api/userone";
export default {
  data() {
    return {
      data: true,
      oneinfo: [],
      myreply: [],
      basurl: "http://127.0.0.1:7001",
      form: {
        phone: "",
        mail: "",
        sex: "",
        age: "",
        sing: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      page:"",
      ishow:false
    };
  },
  created() {
    this.getone();
    this.getpl();
  },
  methods: {
    delmyremark(id) {
      delremark(id).then((res) => {
        if (res.code == 0) {
          this.open2();
          this.getpl();
        }
      });
    },
    getone() {
      getuserone(sessionStorage.getItem("userid")).then((res) => {
        if (res.code == 0) {
          this.oneinfo = res.data;
          this.form.phone = this.oneinfo[0].phone;
          this.form.sex = this.oneinfo[0].sex;
          this.form.age = this.oneinfo[0].age;
          this.form.mail = this.oneinfo[0].mail;
          this.form.sing = this.oneinfo[0].sing;
          this.page = this.oneinfo[0].imgs;
        }
      });
    },
    getpl() {
      myremark(sessionStorage.getItem("userid")).then((res) => {
        if (res.code == 0) {
          this.myreply = res.data;
        }
      });
    },
    updata() {
      upmyinfo(sessionStorage.getItem("userid"), this.form).then((res) => {
        if (res.code == 0) {
          this.open3();
          this.getone();
        }
      });
      this.dialogFormVisible = false;
    },
    //图片上传
    uplog() {
      let el = this.$refs.file.files[0];
      let formdata = new FormData();
      formdata.append(`el`, el);
      this.files = formdata;
      upimg(sessionStorage.getItem("userid"),this.files).then((res) => {
        if (res.code == 0) {
          this.getone();
        }
      });
      this.ishow = false;
    },
    open2() {
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    open3() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    hit(id) {
      sessionStorage.setItem("id", id);
      this.$router.push("/details");
    },
  },
};
</script>

<style scoped>
.del {
  cursor: pointer;
  color: rgb(64, 158, 255);
  position: absolute;
  left: 75%;
  top: 36%;
  font-size: 18px;
}
.del:hover {
  color: rgb(255, 64, 64);
}
.w {
  width: 1100px;
  margin: 0 auto;
}
.box {
  background-color: #f9f9f9;
  /* height: 100vh; */
}
header {
  height: 60px;
  background-color: rgb(45, 49, 51);
  text-align: center;
  font-size: 23px;
  color: #ffffff;
  line-height: 60px;
}
.main {
  width: 1100px;
  margin: 20px auto;
}
.top {
  position: relative;
  /* height: 200px; */
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  justify-content: center;
  padding: 10px 20px 20px 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px #eee;
}
.top .userinfos {
  display: flex;
}
.top img {
  width: 122px;
  height: 122px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 5px;
}
.top .userinfo {
  margin-left: 10px;
}
.top .userinfo ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 3px;
  list-style: none;
}
.top .userinfo ul li {
  padding: 10px;
}
.top .userinfo ul li:nth-child(1) {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  padding: 0 10px;
}
.top .userinfo .qianming {
  padding: 10px 0 0 10px;
  font-size: 20px;
}
.update {
  position: absolute;
  display: inline-block;
  top: 10px;
  right: 20px;
  /* width: 20px; */
  height: 20px;
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(31, 105, 179);
  color: #ffffff;
  line-height: 20px;
}
.update:hover {
  background-color: rgb(64, 158, 255);
  cursor: pointer;
  border: 1px solid #ffffff;
}
.mid {
  background-color: rgb(255, 255, 255);
  border-radius: 20px 20px 0 0;
  /* height: 800px; */
  padding-bottom: 100px;
  box-shadow: 0 0 10px #eee;
}
.mid .nav {
  height: 50px;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  /* border: 1px solid black; */
}
.mid .nav ul li {
  display: inline-block;
  line-height: 50px;
  font-size: 24px;
  color: #666;
  padding: 0 20px;
  border-radius: 20px 0 0;
}
/* .mid .nav ul li:hover{
  background-color: #e4e2e2;
  cursor: pointer;
} */
.mid .text ul li {
  padding: 20px;
  display: flex;
  position: relative;
}
.mid .text ul li img {
  width: 80px;
  height: 80px;
}
.mid .text ul li .textbox {
  width: 1000px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}
.mid .text ul li .textbox .time {
  height: 25px;
  color: #666;
}
.notext {
  text-align: center;
  font-size: 22px;
  color: #666;
  margin-top: 30px;
}
.oo{
  width: 200px;
  height: 200px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>